<template>
    <div>
        <el-carousel :height="computeHeight">
            <el-carousel-item v-for="(item, index) in sliders" :key="index">
                <img :src="item.img" class="slider_img">
            </el-carousel-item>
        </el-carousel>
        <div class="solve head-label">
            <div style="text-align: center;" class="font_size_24">
                芙拉果拉加盟介绍
            </div>
        </div>
        <!-- 盒子 -->
        <div class="border_parent">
            <el-row :gutter="10">
                <el-col :xs="12" :sm="12" :md="6">
                    <div class="border">
                        <div class="border_img_parent">
                            <img :src="images[1].img" class="img_border"/>
                        </div>
                        <div class="border_title">{{images[1].title}}</div>
                        <div class="border_content_one">{{images[1].content[0]}}</div>
                        <div class="border_content_two">{{images[1].content[1]}}</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="6">
                    <div class="border">
                        <div class="border_img_parent">
                            <img :src="images[2].img" class="img_border"/>
                        </div>
                        <div class="border_title">{{images[2].title}}</div>
                        <div class="border_content_one">{{images[2].content[0]}}</div>
                        <div class="border_content_two">{{images[2].content[1]}}</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="6">
                    <div class="border">
                        <div class="border_img_parent">
                            <img :src="images[3].img" class="img_border"/>
                        </div>
                        <div class="border_title">{{images[3].title}}</div>
                        <div class="border_content_one">{{images[3].content[0]}}</div>
                        <div class="border_content_two">{{images[3].content[1]}}</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12"  :md="6">
                    <div class="border" style="margin-right: 0">
                        <div class="border_img_parent">
                            <img :src="images[4].img" class="img_border"/>
                        </div>
                        <div class="border_title">{{images[4].title}}</div>
                        <div class="border_content_one">{{images[4].content[0]}}</div>
                        <div class="border_content_two">{{images[4].content[1]}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 手机端商品展示 -->
        <div id="产品微观" class="head-label">
            <div style="text-align: center;" class="font_size_24">
                品牌产品介绍
            </div>
        </div>
        <div class="product_mobile">
            <el-row>
                <el-col :xs="24" :sm="12">
                    <div class="product_mobile_content">
                        <div class="product_mobile_title font_size_30">{{products[0].title}}</div>
                        <div class="product_font_style product_mobile_content_one">{{products[0].content[0]}}</div>
                        <div class="product_font_style product_mobile_content_two">{{products[0].content[1]}}</div>
                        <div class="product_font_style product_mobile_content_two">{{products[0].content[2]}}</div>
                    </div>

                </el-col>
                <el-col :xs="24" :sm="12">
                    <img :src="products[2].img[0]" class="product_pc_img"/>
                </el-col>
            </el-row>

            <el-row>
                <el-col :xs="24" :sm="12">
                    <div class="product_mobile_content">
                        <div class="product_mobile_title font_size_30">{{products[1].title}}</div>
                        <div class="product_font_style product_mobile_content_one">{{products[1].content[0]}}</div>
                        <div class="product_font_style product_mobile_content_two">{{products[1].content[1]}}</div>
                        <div class="product_font_style product_mobile_content_two">{{products[1].content[2]}}</div>
                    </div>

                </el-col>
                <el-col :xs="24" :sm="12">
                    <img :src="products[1].img[0]" class="product_pc_img"/>
                </el-col>
            </el-row>

            <el-row>
                <el-col :xs="24" :sm="12">
                    <div class="product_mobile_content">
                        <div class="product_mobile_title font_size_30">{{products[2].title}}</div>
                        <div class="product_font_style product_mobile_content_one">{{products[2].content[0]}}</div>
                        <div class="product_font_style product_mobile_content_two">{{products[2].content[1]}}</div>
                        <div class="product_font_style product_mobile_content_two">{{products[2].content[2]}}</div>
                    </div>

                </el-col>
                <el-col :xs="24" :sm="12">
                    <img :src="products[0].img[0]" class="product_pc_img"/>
                </el-col>
            </el-row>
        </div>
        <!-- 后台管理 -->
        <div class="product_pc">
            <el-row>
                <el-col :xs="24" :sm="12">
                    <div class="product_pc_one">
                        <div class="product_mobile_title font_size_30">{{manages[0].title}}</div>
                        <div style="margin-top: 20px" class="product_font_style">{{manages[0].content[0]}}</div>
                        <div style="margin-top: 10px" class="product_font_style">{{manages[0].content[1]}}</div>
                        <div style="margin-top: 10px" class="product_font_style">{{manages[0].content[2]}}</div>
                        <div style="margin-top: 10px" class="product_font_style">{{manages[0].content[3]}}</div>
                        <div style="margin-top: 10px" class="product_font_style">{{manages[0].content[4]}}</div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12">
                    <img :src="manages[0].img[0]" class="product_pc_img"/>
                </el-col>
            </el-row>
        </div>
        <!-- 产品特点-->
        <div id="产品特点" class="product_spec_title head-label">
            <div style="text-align: center;" class="font_size_24">
                产品特点
            </div>
        </div>
        <div class="product_spec_parent">
            <div class="border_one border_spec">
                <div class="border_spec_inner_one">
                    <img :src="spec.product[0].img" style="width: 50px;height: 50px"/>
                    <div style="margin-left:5px; font-weight: bold;" class="font_size_24">
                        {{spec.product[0].title}}
                    </div>
                </div>
                <div style="display: flex;flex-direction: column;">
                    <div class="border_spec_content_one">
                        {{spec.product[0].contents[0]}}
                    </div>
                    <div class="border_spec_inner_last">
                        {{spec.product[0].contents[1]}}
                    </div>
                </div>
            </div>
            <div>
                <img :src="computeArrowImg" class="border_spec_img"/>
            </div>
            <div class="border_spec">
                <div class="border_spec_inner_one">
                    <img :src="spec.product[1].img" style="width: 50px;height: 50px"/>
                    <div style="margin-left:5px; font-weight: bold;" class="font_size_24">
                        {{spec.product[1].title}}
                    </div>
                </div>
                <div style="display: flex;flex-direction: column;">
                    <div class="border_spec_content_one">
                        {{spec.product[1].contents[0]}}
                    </div>
                    <div class="border_spec_inner_last">
                        {{spec.product[1].contents[1]}}
                    </div>
                </div>
            </div>
            <div>
                <img :src="computeArrowImg" class="border_spec_img"/>
            </div>
            <div class="border_spec">
                <div class="border_spec_inner_one">
                    <img :src="spec.product[2].img" style="width: 50px;height: 50px"/>
                    <div style="margin-left:5px; font-weight: bold;" class="font_size_24">
                        {{spec.product[2].title}}
                    </div>
                </div>
                <div style="display: flex;flex-direction: column;">
                    <div class="border_spec_content_one">
                        {{spec.product[2].contents[0]}}
                    </div>
                    <div class="border_spec_inner_last">
                        {{spec.product[2].contents[1]}}
                    </div>
                </div>
            </div>
            <div>
                <img :src="computeArrowImg" class="border_spec_img"/>
            </div>
            <div class="border_spec" style="margin-right: 0">
                <div class="border_spec_inner_one">
                    <img :src="spec.product[3].img" style="width: 50px;height: 50px"/>
                    <div style="margin-left:5px; font-weight: bold;" class="font_size_24">
                        {{spec.product[3].title}}
                    </div>
                </div>
                <div style="display: flex;flex-direction: column;">
                    <div class="border_spec_content_one">
                        {{spec.product[3].contents[0]}}
                    </div>
                    <div class="border_spec_inner_last">
                        {{spec.product[3].contents[1]}}
                    </div>
                </div>
            </div>
        </div>
        <!-- 合作伙伴-->
        <div id="合作伙伴" class="cooperation head-label">
            <div style="text-align: center;" class="font_size_24">
                合作伙伴
            </div>
        </div>
        <div class="cooperation_parent">
            <div style="margin: 0 20px; text-align: center">
                <img style="height: 90px;width: 90px" src="../../static/other/新区便民服务中心-品牌logo.jpg"/>
                <div>美团</div>
            </div>
            <div style="margin: 0 20px; text-align: center">
                <img style="height: 90px;width: 90px;border-radius: 50%;" src="../../static/other/勇丽调味-品牌logo.jpg"/>
                <div>食哼</div>
            </div>
        </div>
        <!-- 关于我们-->
        <div id="关于我们" class="about_me head-label">
            <div style="text-align: center;" class="font_size_24">
                关于我们
            </div>
        </div>
        <div style="width: 90%;background-color: #F2F6FC;margin: 10px auto;">
            <div style="display: flex; flex-direction: column;width: 100%;">
                <p class="about_me_p">{{company[0]}}</p>
                <p class="about_me_p">{{company[1]}}</p>
                <p class="about_me_p">{{company[2]}}</p>
                <p class="about_me_p">{{company[3]}}</p>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        name: 'Index',
        data() {
            return {
                sliders: [],
                images: [
                    {
                        img: require('../../static/other/用户管理.png'),
                        title: "用户管理",
                        content: ["用户消费分析", "用户标签设定"]
                    },
                    {
                        img: require('../../static/other/店铺管理.png'),
                        title: "加盟流程",
                        content: ["完整加盟流程", "保障顾客的权益"]
                    },
                    {
                        img: require('../../static/other/数据分析.png'),
                        title: "投资分析",
                        content: ["较低的成本投入", "较高的收益回报"]
                    }, {
                        img: require('../../static/other/用户构建.png'),
                        title: "品牌优势",
                        content: ["多家成功加盟案例", "顾客粘度提升"]
                    },
                    {
                        img: require('../../static/other/品牌渠道.png'),
                        title: "品牌渠道",
                        content: ["打造店铺自主品牌", "品牌多样化管理"]
                    }
                ],
                products: [
                    {
                        img: [require('../../static/other/产品图2.jpg')],
                        title: "生酪牛油果草莓酸奶昔",
                        content: ["牛油果与草莓的碰撞", "整颗优质牛油果现切现做，入口绵密使人幸福感爆棚",
                            "草莓果粒，每一口酸甜都恰到好处"
                        ]
                    },
                    {
                        img: [require('../../static/other/产品图1.jpg')],
                        title: "粉桃桃草莓酸奶昔",
                        content: ["口感饱含层次，清新中带着草莓香味", "与酸奶融合搅拌，香味满满",
                            "入口酸甜多味,奶昔柔和细腻"
                        ]
                    },
                    {
                        img: [require('../../static/other/产品图3.jpg')],
                        title: "一颗地球酸奶昔",
                        content: ["酸奶味浓郁,夹杂着水果的清香", "健康的同时又不失去口感",
                            "新鲜水果先切先做,每一口回味无穷"
                        ]
                    }
                ],
                manages: [
                    {
                        img: [require('../../static/other/图片1.png')],
                        title: "小程序+美团一体化管理平台",
                        content: ["美团菜品菜单自定义发布 ", "菜品多规格SKU自定义上架 分类自定义",
                            "内部透明的可视化数据,全面了解顾客的喜好",
                            "实时掌握交易详情,为门店和顾客来带便捷",
                            "小程序+美团外卖+门店自提多种渠道"
                        ]
                    }
                ],
                spec: {
                    img: require('../../static/other/arrow.png'),
                    product: [
                        {
                            img: require('../../static/other/手指.png'),
                            title: "自然健康",
                            contents: ["所用材料全部当天现卖先做", "热量低无水果无添加"]
                        },
                        {
                            img: require('../../static/other/店铺管理.png'),
                            title: "原料来源",
                            contents: ["供应商直发货源", "独创酸奶发酵基地"]
                        },
                        {
                            img: require('../../static/other/数据分析.png'),
                            title: "品牌地图",
                            contents: ["适合大多数人的口味喜好", "适合大众口味"]
                        },
                        {
                            img: require('../../static/other/助力零售.png'),
                            title: "产品研发",
                            contents: ["10年专业研发团队", "根据季节、地区研发本土产品"]
                        }
                    ]
                },
                company: [
                    "品牌初衷：打造水果与酸奶融合品牌,所有水果现切现买。",
                    "品牌介绍： FRAGOLA源自意大利语，发音酷似“芙拉果拉”，译为草莓。FRAGOLA的超级符号提取草莓开花阶段，象征芙拉果拉的品牌精神，孕育每一款初始鲜果酸奶。芙拉果拉遵循“健康体验，美好生活”的产品理念，用心做美味健康的酸奶，致力打造以“鲜果酸奶”为招牌产品系列的全新酸奶饮品品牌。",
                    "品牌文化：简单，才是好酸奶。芙拉果拉严选高品质食材，稳控原材，甄选每日鲜果，每一颗水果经过专业的精挑细选，历经层层筛选，将鲜果与酸奶融合创新，从源头种植到自然采摘，从它们进入芙拉果拉每一家门店，都被保证了在最新鲜的时刻被每一位顾客舒心享用。品牌自建顶端物流，保证水果优质新鲜输送，并提供温馨热情的团队服务。“简单就是好酸奶”的专业研发团队秉承初心，集聚匠心，上千次的口感碰撞，只为一杯独一无二的健康好酸奶，让每一位顾客体验芙拉果拉的迷人魅力！",
                    "品牌说明：芙拉果拉一直坚持探索真正的健康酸奶味道，正如我们所坚信，我们为健康酸奶重新定义，不断发展酸奶饮品文化全新品牌。从第一家门店开业至今，芙拉果拉一直在坚持健康道路上坚定不移，我们不会放慢自己前进的脚步，致力于打造成酸奶品牌新门户。"
                ],
                carousel_height: '550px',
            }
        },
        methods: {},
        mounted() {
            this.sliders = [
                {
                    img: require("../../static/slider/a1.jpg")
                },
                {
                    img: require("../../static/slider/a2.jpg")
                },
                {
                    img: require('../../static/slider/a3.jpg')
                },
                {
                    img: require('../../static/slider/a4.jpg')
                }
            ]
        },
        computed: {
            //计算高度
            computeHeight() {
                let screenHeight = document.body.clientWidth;
                if (screenHeight > 415) {
                    return '550px';
                } else {
                    return '250px';
                }
            },
            computeArrowImg() {
                let screenHeight = document.body.clientWidth;
                if (screenHeight > 450) {
                    return require('../../static/other/arrow.png');
                } else {
                    return require('../../static/other/arrow_down.png');
                }
            }

        },
    }
</script>

<style scoped>
    .border_parent {
        width: 90%;
        margin: auto;
    }

    .slider_img {
        height: 550px;
        width: 100%;
    }

    .solve {
        margin-top: 30px;
        margin-bottom: 10px
    }

    .border {
        border-radius: 6px;
        border: 1px solid #EBEEF5;
        height: auto;
        margin: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }

    .border_one {
        margin-left: 0;
    }

    .border_img_parent {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .product_mobile_content {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .product_mobile_img {
        width: 50%;
    }

    .product_mobile_title {
        font-weight: bold;
        text-align: center;
    }

    .product_pc_one {
        text-align: center;
        min-height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .font_size_30 {
        font-size: 1.875em;
    }

    .product_font_style {
        font-size: 1.125em;
    }

    .product_pc_img {
        width: 100%
    }

    .product_pc_img_div {
        width: 50%;
        float: left;
        display: flex;
        align-items: center;
    }

    .product_pc {
        display: flex;
        width: 90%;
        margin: 20px auto;
        background: #F2F6FC;
        align-items: center;
    }

    .product_spec_title {
        margin-top: 30px;
        margin-bottom: 10px
    }

    .product_spec_parent {
        display: flex;
        width: 90%;
        margin: 20px auto;
        align-items: center;
        height: auto
    }

    .cooperation_parent {
        display: flex;
        justify-content: center;
        width: 90%;
        margin: 20px auto;
        align-items: center;
        height: auto
    }

    .border_spec {
        border-radius: 6px;
        border: 1px solid #EBEEF5;
        float: left;
        width: 25%;
        height: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .about_me_p {
        font-size: 1.25em;
        font-weight: normal;
        padding: 0 20px;
        margin: 10px;
    }

    .border_title {
        font-family: "PingFang SC";
        margin-top: 10px;
        font-size: 1.125em;
        font-weight: bold;
        text-align: center;
    }

    .border_content_one {
        margin-top: 20px;
        font-size: 1.125em;
        text-align: center;
    }

    .border_content_two {
        margin-top: 5px;
        font-size: 1.125em;
        margin-bottom: 25px;
        text-align: center;
    }

    .img_border {
        margin-top: 15px;
        width: 80px;
        height: 80px
    }

    .border_spec_inner_one {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 35px;
        height: 70px;
    }

    .border_spec_content_one {
        margin-top: 15px;
        font-size: 1.125em;
        float: left;
        text-align: center;
    }

    .border_spec_inner_last {
        margin-top: 15px;
        font-size: 1.125em;
        float: left;
        margin-bottom: 25px;
        text-align: center;
    }

    .cooperation {
        margin-top: 30px;
        width: 100%;
    }

    .about_me {
        display: flex;
        margin-top: 30px;
        justify-content: center;
        width: 100%;
    }

    .product_mobile {
        width: 90%;
        align-items: center;
        margin: 20px auto;
        background: #F2F6FC;
    }

    .product_mobile_img_div {
        width: 50%;
        height: auto;
    }

    .product_mobile_content_one {
        margin-top: 20px;
        text-align: center;
    }

    .product_mobile_content_two {
        margin-top: 10px;
        text-align: center;
    }

    /* 屏幕设备适配 max-device-width: 400px */
    @media screen and (max-device-width: 415px) {
        .slider_img {
            height: 250px;
            width: 100%;
        }


        .border_parent {
            display: flex;
            width: 90%;
            margin: auto;
            height: auto;
            flex-direction: column;
        }

        .border {
            border-radius: 6px;
            border: 1px solid #EBEEF5;
            float: left;
            width: 100%;
            height: auto;
            margin: 10px 0 auto;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
            /*background: aquamarine;*/
        }

        .border_img_parent {
            margin-top: 0;

        }

        .product_mobile {
            width: 90%;
            align-items: center;
            margin: 20px auto;
            height: auto;
            background: #F2F6FC;
        }

        .product_mobile_content {
            width: 100%;
            margin-top: 15px;
        }

        .product_mobile_content_one {
            margin-top: 5px;
        }

        .product_mobile_content_two {
            margin-top: 5px;
        }

        .product_mobile_img_div {
            display: flex;
            width: 100%;
            height: auto;
            justify-content: center;
            margin-top: 10px;
            margin-bottom: 15px;
        }

        .product_mobile_img {
            float: left;
        }

        .product_mobile_title {
            font-weight: bold;
        }

        .product_pc_one {
            width: 100%;
            margin-top: 15px;
        }

        .font_size_30 {
            font-size: 1.25em;
        }

        .product_font_style {
            font-size: 1em;
        }

        .product_pc_img {
            height: 280px;
            width: 320px;
        }

        .product_pc_img_div {
            width: 100%;
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }

        .product_pc {
            display: flex;
            width: 90%;
            height: auto;
            margin: 20px auto;
            background: #F2F6FC;
            flex-direction: column;
        }

        .head-label {
            display: flex;
            margin-top: 10px;
        }

        .product_spec_parent {
            display: flex;
            width: 90%;
            align-items: center;
            justify-content: center;
            margin: 20px auto;
            height: auto;
            flex-direction: column;
        }

        .border_spec {
            float: left;
            height: auto;
            margin: 8px;
            width: 100%;
            border-radius: 6px;
            border: 1px solid #EBEEF5;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }


        .border_title {
            font-family: "PingFang SC";
            margin-top: 5px;
            font-size: 1.125em;
            font-weight: bold;
        }

        .border_content_one {
            margin-top: 5px;
            font-size: 1.125em;
        }

        .border_content_two {
            margin-top: 5px;
            font-size: 1.125em;
            margin-bottom: 8px;
        }

        .img_border {
            margin-top: 8px;
            width: 80px;
            height: 80px
        }

        .border_spec_inner_one {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 8px;
            /*background-color: aqua;*/
            height: 70px;
        }

        .border_spec_content_one {
            margin-top: 5px;
            font-size: 1.125em;
            float: left;
        }

        .border_spec_inner_last {
            /*background-color: bisque;*/
            margin-top: 5px;
            font-size: 1.125em;
            float: left;
            margin-bottom: 8px;
        }

        .about_me {
            display: flex;
            margin-top: 10px;
            width: 100%;
        }
    }

    .border_spec_img {
        width: 75px;
        height: 55px;
        align-self: center
    }

    .font_size_24 {
        font-size: 1.5em;
    }
</style>